<script setup lang='ts'>
import { onMounted, ref, reactive ,markRaw} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Timer, Check, Close, Delete } from '@element-plus/icons-vue'
import http from '../../api/http'
import { imgBaseURL } from '../../api/baseURL'
import type { Pder, pderxq } from '@/types/pder'
import { get } from 'http'
import pderxqy from './pderxqy.vue'



//#region  列表分页查询相关
const tableData:Pder[] = reactive([])
const likename = ref('华')
const page = ref(1)
const size = ref(3)
const total = ref(0)
const zz1=reactive([])
const zz2=reactive([])
const zon=reactive([])
const zon1=reactive([])
const sj:pderxq[]=reactive([])
//查询用户数据
const getUsers = () => {
    http.getList<Pder>('Pder/Pderfen', { page: page.value, limit: size.value, name: likename.value,sj:value2.value[1],sj1:value2.value[0] })
        .then(res => {
             console.log(res.data)
            total.value = res.count
        
          tableData.length=0;
            tableData.push(...res.data)
            console.log(tableData)
        }).catch(err => {
            console.log('err: ', err);
        })
}
const getUsers1 = () => {
    http.getList<Pder>('Pder/Pderfen', {page: page.value, limit:1000, name: likename.value,sj:value2.value[1],sj1:value2.value[0] })
        .then(res => {  
            zz.value=res.count
             
            zz1.push(...res.data)
            zon.push(...zz1.filter(n=>n.zt<5))
            zon1.push(...zz1.filter(n=>n.zt>4))
           console.log(zz1)
        }).catch(err => {
            console.log('err: ', err);
        })
}
const getUsers2 = () => {
    http.getList<Pder>('Pderxq', {})
        .then(res => {  
           
             
            zz2.push(...res.data)
           console.log(zz2)
        }).catch(err => {
            console.log('err: ', err);
        })
}

const formatCurrency = (amount, currency = 'CNY') => {
  // 处理非数字情况
  if (isNaN(amount)) return '¥0.00'
  
  // 根据货币类型选择符号和格式
  const options = {
    CNY: { symbol: '¥', decimal: 2 },
    USD: { symbol: '$', decimal: 2 },
    EUR: { symbol: '€', decimal: 2 }
  }
  
  const { symbol, decimal } = options[currency] || options.CNY
  
  // 格式化格式化数字（千分位+保留小数）
  const formatted = amount.toFixed(decimal).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  
  // 拼接符号（根据货币类型调整符号位置）
  return currency === 'USD' || currency === 'EUR' 
    ? `${symbol}${formatted}`  // $1,234.56
    : `${symbol}${formatted}`  // ¥1,234.56（人民币符号在前）
}
const zz=ref(0)
const parentBorder=ref(false)
const yy=computed(()=>{
   return zz
})
const yy1=computed(()=>{
   return zz1.reduce((sum, item) => sum + item.price, 0);
})
const yy2=computed(()=>{
   return zz2.filter(n=>n.zt>3).reduce((sum, item) => sum + item.shu, 0);
})
const yy3=computed(()=>{
   return zz1.filter(n=>n.zt<5).reduce((sum, item) => sum + item.shu, 0);
})
const tt1=computed(()=>{
   return tableData.reduce((sum, item) => sum + item.price, 0);
})
const tt2=computed(()=>{
   return tableData.flatMap(order=>order.pxq).reduce((sum, item) => sum + item.shu, 0);
})
//每页数量的改变事件
const handleSizeChange = (val: number) => {
    size.value = val
    getUsers()
}
//翻页
const handleCurrentChange = (val: number) => {
    page.value = val
    getUsers()
}
//#endregion

//#region  添加

//#endregion 

//#region  修改
const formData = ref({
    userId: 0,
    loginName: '',
    loginPwd: '',
    userName: '',
    sex: '',
    birthday: new Date(),
    phone: '',
    imgId: 0,
    roleId: 0,
    status: true,
    lastTime: new Date(),
    path: '',
    roleName: '',
    deptId: 0,
    deptName: ''
})
const editDialogVisible = ref(false)
const edit = (row: Pder) => {
    //formData.value = row
    //弹出修改框
    editDialogVisible.value = true

}




const value2 = ref(['2020-01-01','2026-01-01'])

const shortcuts = [
  {
    text: '过去一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '过去一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '过去三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
//#endregion 
const cha=()=>{
 console.log(value2.value[0])
   /* http.getList<Pder>('Pder/Pderfen', { page: page.value, limit: size.value, name: likename.value,sj:value2.value[1],sj1:value2.value[0] })
        .then(res => {
             console.log(res.data)
            total.value = res.count
            
          tableData.length=0;
            tableData.push(...res.data)
            console.log(tableData)
        }).catch(err => {
            console.log('err: ', err);
        })  */
       getUsers();
}
const createDialogVisible = ref(false)

//#region 单个删除
const xianq = (zz:[]) => {
   console.log(zz)
   sj.length=0
   sj.push(...zz)
 createDialogVisible.value = true
}
//#endregion

//#region 批量删除
const multipleSelection = ref<Pder[]>([])  //选中的值 全部值
const handleSelectionChange = (val: Pder[]) => {
    multipleSelection.value = val
    //console.log('multipleSelection.value: ', multipleSelection.value)
}

//#endregion

//#region  组件挂载（初始化）
onMounted(() => {
    getUsers();
     getUsers1();
     getUsers2();
})
//#endregion 

</script>

<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
       
          
            <div class="block">
     
      <el-date-picker
        v-model="value2"
        type="daterange"
        unlink-panels
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        range-separator="To"
         
        start-placeholder="Start date"
        end-placeholder="End date"
        :shortcuts="shortcuts"
        
      />
   <el-button type="info" plain  @click="cha()">查询</el-button> <span style="font-size: 13px; margin-left: 390px;">格式:</span> <el-switch v-model="parentBorder" />
    </div >
       
        <el-table  :data="tableData" stripe style="width: 100%;" :border="parentBorder" @selection-change="handleSelectionChange">
            
            <el-table-column prop="pbh" label="编号" width="150" />
          <!--   <el-table-column prop="path" label="头像" width="80">
                <template #default="{ row }">
                    <el-avatar :src="imgBaseURL + row." />
                </template>
            </el-table-column> -->
            <el-table-column prop="userName" label="姓名" width="80" />
            
            <el-table-column prop="phone" label="手机" width="120" />
            \<el-table-column prop="dizhi" label="下单地址" width="120" />
            <el-table-column prop="pdata" label="下单时间" width="140">
                <!-- 插槽 -->
                <template #default="{ row }">
                    <div style="display: flex; align-items: center">
                        <el-icon>
                            <timer />
                        </el-icon>
                        <span style="margin-left: 10px">{{ row.pdata.substr(0, 10) }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="ptype" label="取餐" width="80">
                <template #default="{ row }">
                    {{ row.ptype==1?"自取":"外卖" }}
                </template>
            </el-table-column>
            <el-table-column prop="zt" label="状态" width="80">
                <template #default="{ row }">
                    {{ row.zt==4?"完成":"取消" }}
                </template>
            </el-table-column>

           <el-table-column align="right">
      <template #header>
        <el-input v-model="likename" @input="getUsers()" size="small" placeholder="Type to search" />
      </template>
      <template #default="{row}">
         <el-button type="warning" @click="xianq(row.pxq)" plain>详情</el-button>
      </template>
    </el-table-column>
        </el-table>
        <!-- 底部 分页 -->
        <template #footer>
            <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </template>
        
    </el-card>
     <el-divider content-position="left">总共</el-divider>
<span style="">总交易数:</span><span>{{ yy }}</span>
<span style="margin-left: 10px;">总交易商品数量:{{ yy2 }}</span>
<span style="margin-left: 10px;">总交易金额:{{formatCurrency(yy1, 'CNY')}}</span>
<span style="margin-left: 10px;">交易成功:{{ zon.length }}</span>
<span style="margin-left: 10px;">交易失败:{{ zon1.length }}</span>
<el-divider content-position="left">此页</el-divider>
<span style="margin-left: 10px;">此页条数:{{tableData.length }}</span>
   <span style="margin-left: 10px;">交易商品数量:{{ tt2 }}</span>
   <span style="margin-left: 10px;">交易金额:{{formatCurrency(tt1, 'CNY')}}</span>
   
    <!-- 新增、修改 弹窗组件 -->
<pderxqy v-model="createDialogVisible" :formData="sj" @refresh="getUsers"></pderxqy>
</template>
 

<style scoped>


.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  margin-left: 10px;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
